<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width:100%;height:30px;">能耗总览</dv-decoration-7>
    <el-row>
      <el-col :span="8">
        <div id="main1" style="width: 100%;height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main2" style="width: 100%;height: 250px"></div>
      </el-col>
      <el-col :span="8">
        <div id="main3" style="width: 100%;height: 250px"></div>
      </el-col>
    </el-row>
  </dv-border-box-8>
</template>

<script>

export default {
  name: "Dashboard",
  mounted(){
    this.initEchart();
  },
  data() {
    return  {

    }
  },
  methods:{
    getData() {
      return new Promise((resolve) => {
        // 使用静态数据代替API调用
        resolve([{
          totalPowerConsume: 80000,
          totalOfficePowerConsume: 20000,
          totalWaterConsume: 40000,
          totalOfficeWaterConsume: 10000,
          totalCarbonEmission: 150000
        }]);

      })

    },
    initEchart(){
      let data = this.getData()
      data.then( res => {
        // 使用固定值代替动态计算（可根据需要调整数值）
        let totalPowerConsume = 100000;  // 总耗电量
        let totalWaterConsume = 50000;   // 总耗水量
        let totalCarbonEmission = 200000; // 总碳排放
        let myChart1 = this.$echarts.init(document.getElementById('main1'),'dark');
        let myChart2 = this.$echarts.init(document.getElementById('main2'),'dark');
        let myChart3 = this.$echarts.init(document.getElementById('main3'),'dark');

        // ... 保持原有图表配置代码不变 ...
        let option1 = {
          backgroundColor: '',
          // 工具提示
          tooltip: {
            // 格式 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
            // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: '{a} <br/>{b} : {c}Kg'
          },
          // 系列
          series: [
            {
              // 名字
              name: 'Pressure',
              // 类型
              type: 'gauge', // gauge-仪表盘
              // 最大值
              max: totalPowerConsume + 100000,
              // 样式
              itemStyle: {
                color: '#FAC858'
              },
              axisLabel: {            // 刻度标签。
                show: false,             // 是否显示标签,默认 true。
              },
              pointer : {    //指针大小
                width : 2
              },
              // 进度条
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true, // 是否开启标签的数字动画。
                formatter: '{value}', // 格式化函数或者字符串
                fontSize: 16,
                color: '#FAC858',
                offsetCenter: [0,"30%"]  // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              },
              data: [
                {
                  value: totalPowerConsume,
                  name: '耗电量',
                  title: {
                    offsetCenter: ['0%', '80%']
                  },
                }
              ],
            }
          ]
        };
        let option2 = {
          backgroundColor: '',
          tooltip: {
            formatter: '{a} <br/>{b} : {c}Kg'
          },
          series: [
            {
              name: 'Pressure',
              max: totalWaterConsume +10000,
              type: 'gauge',
              itemStyle: {
                color: '#73fa58',
              },
              axisLabel: {            // 刻度标签。
                show: false,             // 是否显示标签,默认 true。
              },
              pointer : {    //指针大小
                width : 2
              },
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}',
                fontSize: 16,
                color: '#73fa58',
                offsetCenter: [0,"30%"]
              },
              data: [
                {
                  value: totalWaterConsume,
                  name: '耗水量',
                  title: {
                    offsetCenter: ['0%', '80%']
                  },
                }
              ],
            }
          ]
        };
        let option3 = {
          backgroundColor: '',
          tooltip: {
            formatter: '{a} <br/>{b} : {c}Kg'
          },
          series: [
            {
              name: 'Pressure',
              type: 'gauge',
              max: totalCarbonEmission + 1000000,
              itemStyle: {
                color: '#5878fa'
              },
              axisLabel: {            // 刻度标签。
                show: false,             // 是否显示标签,默认 true。
              },
              pointer : {    //指针大小
                width : 2
              },
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}',
                fontSize: 16,
                color: '#5878fa',
                offsetCenter: [0,"30%"]
              },
              data: [
                {
                  value: totalCarbonEmission,
                  name: '碳排放量',
                  title: {
                    offsetCenter: ['0%', '80%']
                  },
                }
              ],
            }
          ]
        };
        option1 && myChart1.setOption(option1);
        option2 && myChart2.setOption(option2);
        option3 && myChart3.setOption(option3);
      })
    },
  }
}
</script>

<style scoped>

</style>
